<script setup>
import { ref } from 'vue';
// 引入路由
import { useRouter } from 'vue-router'

// 实例化路由
const router = useRouter()
const value = ref("")
const onClickLeft = () => history.back();
const onClickRight = () => {
//     跳转至编辑页-writeNote
router.push('/writenote')
}

// 跳转到nonote页面
const goNoNote = () => {
  router.push('/nonote')
}
</script>

<template>
  <div class="note">
    <div class="nav">
      <van-nav-bar title="笔记" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="edit" size="18" @click="onClickRight" />
        </template>
      </van-nav-bar>
    </div>
    <div class="search">
      <van-search
        v-model="value"
        placeholder="搜索"
        shape="round"
        background="#fff"
      />
    </div>
    <div class="note_list">
      <van-cell value="0" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont icon-caogaoxiang"></i>
          <div class="noteValue">
            <span class="custom">草稿箱</span>
            <span class="custom-title">私有</span>
          </div>
        </template>
      </van-cell>
      <van-cell value="0" is-link center @click="goNoNote">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont icon-24gf-folderShare"></i>
          <div class="noteValue">
            <span class="custom">公开笔记</span>
            <span class="custom-title">公开</span>
          </div>
        </template>
      </van-cell>
      <van-cell value="0" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont icon-a-wenjianjiawenjian"></i>
          <div class="noteValue">
            <span class="custom">个人笔记</span>
            <span class="custom-title">私有</span>
          </div>
        </template>
      </van-cell>
      <van-cell value="0" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont icon-a-wenjianjiawenjian"></i>
          <div class="noteValue">
            <span class="custom">学习笔记</span>
            <span class="custom-title">私有</span>
          </div>
        </template>
      </van-cell>
      <van-cell value="0" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont icon-a-wenjianjiawenjian"></i>
          <div class="noteValue">
            <span class="custom">课堂笔记</span>
            <span class="custom-title">私有</span>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<style lang="less" scoped>
.note {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f7f8fa;
}
.van-cell {
  border-bottom: 1px solid rgb(218, 216, 216);
}
.van-icon-arrow-left:before,
.van-icon-edit:before {
  color: black;
}

.note_list {
  .noteValue {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .iconfont {
    float: left;
    padding: 10px 5px;
    font-size: 40px;
    vertical-align: middle;
    color: rgba(30, 144, 255, 0.4);
  }
  .custom {
    font-size: 12px;
    font-weight: 600;
  }
  .custom-title {
    font-size: 8px;
    color: rgb(146, 146, 146);
  }
  //   span {
  //     padding: 5px;
  //     font-size: 12px;
  //     font-weight: 600;
  //   }
}
</style>